<template>
	<view class="catebox">
		<view class="search" @click="tosearch">
		  <view class="ser">
		    <view class="icon"></view>
		    <view>商品搜索，共239款好物</view>
		  </view>
		</view>
		<view class="category">
				<scroll-view scroll-y="true" class="left">
					<view class="iconText" @click="selectItem(item.id, index)" v-for="(item, index) in listData" :key="index" :class="[index === nowIndex ? 'active' : '']">{{item.name}}</view>
				</scroll-view>
				
				<scroll-view scroll-y="true" class="right">
					<view class="banner">
					  <image :src="detailData.banner_url" alt="" />
					</view>
					<view class="title">
					  <view>-</view>
					  <view>{{detailData.name}}分类</view>
					  <view>-</view>
					</view>
					<!-- <view class="item" @click="categoryList(item.id)" v-for="(item, index) in detailData.subList" :key="index">
						<image :src="item.wap_banner_url" alt="" />
						<view>{{item.name}}</view>
					</view> -->
					<view class="bottom">
					  <view class="item" @click="categoryList(item.id)" v-for="(item, index) in detailData.subList" :key="index">
					    <image :src="item.wap_banner_url" alt="" />
					    <view>{{item.name}}</view>
					  </view>
					</view>
				</scroll-view>
		  </view>
	</view>

</template>


<script>
	export default {
		data() {
			return {
				listData: [],
				nowIndex: 0,
				id: '1005000',
				detailData: {}
			}
		},
		onLoad() {
			this.getListData()
			this.selectItem(this.id)
		},
		methods: {
			tosearch(){
				uni.navigateTo({
					url:"../search/search"
				})
			},
			categoryList(id){
				uni.navigateTo({
					url:'/pages/categorylist/categorylist?id=' + id
				})
			},
			async getListData(){
				const data = await this.$request({
					url:'/category/indexaction'
				})
				this.listData = data.data.categoryList
			},
			async selectItem(id,index){
				this.nowIndex = index || 0
				const data = await this.$request({
					url:'/category/currentaction',
					data:{
						id:id
					}
				})
				this.detailData = data.data.data.currentOne
			}
		}
	}
</script>

<style lang="scss">
	.catebox{
		height: 100%;
		position: relative;
		.search{
			position: absolute;
			height: 100rpx;
			width: 100%;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 30rpx;
			background: #fff;
			border-bottom: 1rpx solid #ededed;
			box-sizing: border-box;
			.ser {
			      width: 690rpx;
			      height: 56rpx;
			      background: #ededed;
			      border-radius: 8rpx;
			      display: flex;
			      align-items: center;
			      justify-content: center;
			
			      view {
			        display: inline-block;
			      }
			
			      .icon {
			        background: url('http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png') center no-repeat;
			        background-size: 100%;
			        width: 28rpx;
			        height: 28rpx;
			        margin-right: 10rpx;
			      }
			   }
		}
	}
	.category{
		height: 100%;
		display: flex;
		// padding-top: 100rpx;
		padding-top: 100rpx;
		box-sizing: border-box;
		
		    .left {
		      width: 162rpx;
		      height: 100%;
		      text-align: center;
		      .iconText {
		        text-align: center;
		        line-height: 90rpx;
		        width: 162rpx;
		        height: 90rpx;
		        color: #333;
		        font-size: 28rpx;
		        border-left: 6rpx solid #fff;
		      }
		
		      .active {
		        color: #ab2b2b;
		        font-size: 36rpx;
		        border-left: 6rpx solid #ab2b2b;
		      }
		    }
		    .right {
		      flex: 1;
		      border-left: 1rpx solid #fafafa;
		      flex: 1;
		      height: 100%;
		      padding: 0 30rpx 0 30rpx;
		
		      .banner {
		        width: 100%;
		        height: 222rpx;
		        margin-top: 20rpx;
		
		        image {
		          width: 100%;
		          height: 100%;
		        }
		      }
		
		      .title {
		        text-align: center;
		        padding: 50rpx 0;
		
		        view:nth-child(2) {
		          font-size: 24rpx;
		          color: #333;
		          padding: 0 10rpx;
		        }
		
		        view:nth-child(2n + 1) {
		          color: #999;
		        }
		      }
		    }
				      .bottom {
				        display: flex; // justify-content: space-between;
				        flex-wrap: wrap;
				
				        .item {
				          width: 33.33%;
				          text-align: center;
				          margin-bottom: 20rpx;
				
				          image {
				            height: 144rpx;
				            width: 144rpx;
				            display: block;
				            margin: 0 auto;
				          }
				        }
				      }
	}
// .category {
//   width: 100%;
//   height: 100%;
//   display: flex;
//   flex-direction: column;
//   .search {
//     height: 88rpx;
//     // width: 100%;
//     padding: 0 30rpx;
//     background: #fff;
//     display: flex;
//     align-items: center;
//     border-bottom: 1rpx solid #ededed;
//     .ser {
//       width: 690rpx;
//       height: 56rpx;
//       background: #ededed;
//       border-radius: 8rpx;
//       display: flex;
//       align-items: center;
//       justify-content: center;

//       view {
//         display: inline-block;
//       }

//       .icon {
//         background: url('http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png') center no-repeat;
//         background-size: 100%;
//         width: 28rpx;
//         height: 28rpx;
//         margin-right: 10rpx;
//       }
//     }
//   }

//   .content {
//     flex: 1;
//     background: #fff;
//     display: flex;
//     .left {
//       width: 162rpx;
//       height: 100%;
//       text-align: center;
//       .iconText {
//         text-align: center;
//         line-height: 90rpx;
//         width: 162rpx;
//         height: 90rpx;
//         color: #333;
//         font-size: 28rpx;
//         border-left: 6rpx solid #fff;
//       }

//       .active {
//         color: #ab2b2b;
//         font-size: 36rpx;
//         border-left: 6rpx solid #ab2b2b;
//       }
//     }

//     .right {
//       flex: 1;
//       border-left: 1rpx solid #fafafa;
//       flex: 1;
//       height: 100%;
//       padding: 0 30rpx 0 30rpx;

//       .banner {
//         width: 100%;
//         height: 222rpx;
//         margin-top: 20rpx;

//         image {
//           width: 100%;
//           height: 100%;
//         }
//       }

//       .title {
//         text-align: center;
//         padding: 50rpx 0;

//         view:nth-child(2) {
//           font-size: 24rpx;
//           color: #333;
//           padding: 0 10rpx;
//         }

//         view:nth-child(2n + 1) {
//           color: #999;
//         }
//       }

//       .bottom {
//         display: flex; // justify-content: space-between;
//         flex-wrap: wrap;

//         .item {
//           width: 33.33%;
//           text-align: center;
//           margin-bottom: 20rpx;

//           image {
//             height: 144rpx;
//             width: 144rpx;
//             display: block;
//             margin: 0 auto;
//           }
//         }
//       }
//     }
//   }
// }

</style>
